function List(props) {
  const {data} = props

  return (
    <div className='rank-list'>
      {data?.length ? data.map((item, index) => (
        <div key={item.id} className='rank-item' onClick={() => {
          props.handleClick(item.id)
        }}>
          <div className='rank'>
            {index < 2 ? (index === 0 ? <img src={require('@/assets/rank/rank2.png')}/> :
              <img src={require('@/assets/rank/rank3.png')}/>) : <p>{index + 2}</p>}
          </div>
          <img className='header-img'
               src={item?.houseInfoPictures ? item?.houseInfoPictures.split('|')[0] : require('@/assets/blank.png')}/>
          <p className='house-name'>{item?.name}</p>
          <p className='house-num'>{item?.views}</p>
        </div>
      )) : ''}
    </div>
  )
}

export default List
